﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h2>DropDownList</h2>
    
        <select id="s1" multiple="multiple">
            <option>Low</option>
            <option selected="selected">Medium</option>
            <option selected="selected">High</option>
        </select>
    
        <select id="s6" >
			<optgroup label="Letters">
				<option>A</option>
				<option>B</option>
				<option selected="selected">C</option>
			</optgroup>
            <optgroup label="Numbers">
				<option>1</option>
				<option>2</option>
				<option selected="selected">3</option>
			</optgroup>
        </select>
<script type="text/javascript">
        $(document).ready(function() {
            $("#s1").dropdownchecklist();
//            $("#s2").dropdownchecklist();
//            $("#s3").dropdownchecklist({ width: 100 });
//            $("#s4").dropdownchecklist({ maxDropHeight: 120 });
//            $("#s5").dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 });
 			$("#s6").dropdownchecklist();
//			$("#s7").dropdownchecklist({ maxDropHeight: 200 });
        });
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">

	<script src="../../Content/js/jquery/plugins/dropdownlist/ui.core.js" type="text/javascript"></script>

	<script src="../../Content/js/jquery/plugins/dropdownlist/ui.dropdownchecklist.js"
		type="text/javascript"></script>

	<link href="../../Content/js/jquery/plugins/dropdownlist/ui.dropdownchecklist.css"
		rel="stylesheet" type="text/css" />
</asp:Content>
